<template>
  <view class="start-consulting">
    <view class="top-content">
      <view class="u-body-item">
        <u-section title="问诊专家" :sub-title="doctorList.realName" :show-line="false" :arrow="false"></u-section>
      </view>
      <view class="u-body-item">
        <u-section title="选择咨询人" :sub-title="currentUser.username || '点击选择'" :show-line="false" @click="selectHandle">
        </u-section>
      </view>
    </view>
    <!-- 点击选择弹出层 -->
    <!-- 选择预约咨询人弹出框开始 -->
    <u-popup v-model="showPopup" mode="bottom" height="678rpx">
      <view class="popup-content">
        <view class="close">
          <img src="@/static/img/pay/close.png" alt="" @tap="closeHandle2" />
        </view>
        <scroll-view scroll-y="true" style="height: 678rpx" v-if="consultantList.length > 0">
          <view class="uni-list">
            <radio-group @change="radioGroupChange">
              <label @tap.stop="radioChange(item)" class="uni-list-cell uni-list-cell-pd"
                v-for="(item, index) in consultantList" :key="index">
                <view style="display: flex">
                  <radio color="#e64340" :value="item.value" />
                  <view style="margin-left: 10rpx">{{ item.visitCardNo }}</view>
                </view>
                <view>{{ item.username }}</view>
              </label>
            </radio-group>
          </view>
        </scroll-view>
        <button type="warn" class="addPeople" @tap="addPerson">
          添加咨询人
        </button>
      </view>
    </u-popup>
    <!-- <u-popup v-model="showPopup" mode="bottom" height="678rpx">
      <view class="popup-content">
        <view class="close">
          <img src="@/static/img/pay/close.png" alt="" @tap="closeHandle3" />
        </view>
        <scroll-view
          scroll-y="true"
          style="height: 678rpx"
          v-if="consultantList.length > 0"
        >
          <u-radio-group v-model="value" @change="radioGroupChange">
            <view
              class="popup-box"
              v-for="(item, index) in consultantList"
              :key="index"
            >
              <u-radio
                @change="radioChange(item)"
                :name="index"
                active-color="red"
              >
                {{ item.visitCardNo }}
              </u-radio>
              <view class="">
                {{ item.username }}
              </view>
            </view>
          </u-radio-group>
        </scroll-view>
        <view class="nomessage" v-else> 暂无信息 </view>
        <button type="warn" class="addPeople" @tap="addPerson">
          添加咨询人
        </button>
      </view>
    </u-popup> -->
    <view class="consulting-question">
      <!-- 咨询问题 -->
      <view class="com-title"> 咨询问题 </view>
      <u-input v-model="submitData.description" :placeholder="placeholder" :type="type" :clearable="clearable"
        :border="border" :height="height" :auto-height="autoHeight" />
    </view>
    <view class="add-image">
      <view class="com-title"> 添加图片 </view>
      <!-- ref="uUpload" :auto-upload="false" -->
      <u-upload :header="header" :action="action" ref="uUpload" :file-list="fileList" del-bg-color="#606165"
        del-color="#fff"></u-upload>
    </view>

    <u-button type="error" @click="submit" :custom-style="customStyle" shape="circle">确认咨询</u-button>
  </view>
</template>

<script>
import { API } from "@/config/myApi.js";
import {
  lk_buyer,
  lk_common,
  lk_expert,
  lk_seller,
  lk_manager,
  lk_consumer,
} from "@/config/myConfig.js";
export default {
  data() {
    return {
      doctorList: {}, // 医生数据
      consultantList: [], //咨询人列表
      //弹出层显示
      showPopup: false,
      currentUser: {}, //当前选中的咨询人
      //咨询数据
      consultData: {
        description: " ",
        realName: "", //接诊医生
        siteName: "", //院区场地
        url: "", //图片
      },
      submitData: {
        description: "", //描述
        descriptionImage: "", //图片，数组字符串
        expertId: "", //专家id
        visitCardNo: "", //咨询人健康卡号
      },
      placeholder:
        "为了获得更好的帮助，请尽可能的描述您的基本情况，病情描述不得少于10个字",
      type: "textarea",
      border: false,
      height: 300,
      autoHeight: true,
      clearable: false,

      header: {
        accessToken: uni.getStorageSync("token"),
      },
      action: `${lk_common}/common/common/upload/file`, //上传图片的地址
      fileList: [], //上传图片的数组
      //添加咨询人
      addStyle: {
        position: "absolute",
        left: "30rpx",
        bottom: "30rpx",
        width: "690rpx",
        height: "90rpx",
      },
      saveData: {}, // 下一页需要的数据，存起来
      value: "orange",
      //确认咨询样式
      customStyle: {
        position: "fixed",
        bottom: "30rpx",
        height: "90rpx",
        left: "50%",
        width: "690rpx",
        transform: "translateX(-50%)",
      },
    };
  },
  onLoad(options) {
    console.log(options);
    if (options.id) {
      this.doctorList = options;
      this.submitData.expertId = this.doctorList.id;
    } else if (!JSON.parse(options.options).id) {
      uni.showToast({
        title: "未查询到专家id",
        success: () => {
          uni.navigateBack({
            delta: 1,
          });
        },
      });
    } else {
      this.doctorList = JSON.parse(options.options);
      this.submitData.expertId = this.doctorList.id;
    }
    // this.doctorList = uni.getStorageSync('doctorDetail');
    this.getfindRelationUser();
  },
  onShow() { },

  // computed:{
  methods: {
    //选择咨询人
    async getfindRelationUser() {
      let res = await API.getVisitList();
      if (res.code === 200) {
        console.log("查询用户绑定的咨询人", res.result);
        this.consultantList = res.result;
      } else {
        uni.showToast({
          title: "查询咨询人失败",
          icon: "none",
        });
      }
    },
    selectHandle(e) {
      console.log("点击选择", e);
      this.showPopup = true;
    },

    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      this.currentUser = e;
      this.showPopup = false;
      this.submitData.visitCardNo = e.visitCardNo;
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      console.log(e);
    },
    addPerson() {
      this.showPopup = false;
      uni.navigateTo({
        url: "/pages/addPatient/addPatient",
      });
    },
    // 确认咨询
    async submit() {
      for (let key in this.submitData) {
        if (key == "descriptionImage") {
          if (this.$refs.uUpload.lists.length > 0) {
            let list = this.$refs.uUpload.lists;
            let arr = [];
            for (var i = 0; i < list.length; i++) {
              arr.push(list[i].response.result);
            }
            this.submitData[key] = arr.toString();
          }
        } else {
          if (this.submitData[key] == "" || !this.submitData[key]) {
            uni.showToast({
              title: "请先填写完整信息",
              icon: "none",
            });
            return;
          }
        }
      }
      let res = await API.saveConsult(this.submitData);
      if (res.code == 200) {
        uni.navigateTo({
          url: `/pages/addPatient/pay?id=${res.result.id}`,
        });
      } else {
        uni.showToast({
          title: "请求失败，请重试",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$r24: 24rpx;

.start-consulting {
  padding: $r24 30rpx;
}

.top-content {
  width: 100%;
  height: 219rpx;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 0 auto $r24;
  padding: 0 $r24;

  .u-body-item {
    display: flex;
    align-items: center;
    height: 50%;
    font-size: 32rpx;
    color: #333;
    padding: 20rpx 10rpx;
    border-bottom: 1px solid #e3e3e3;

    &:last-child {
      border-bottom: none;
    }
  }
}

.popup-content {
  padding: 0 30rpx;
  padding: 32rpx 30rpx;
  position: relative;

  .addPeople {
    position: fixed;
    bottom: 6rpx;
    right: 70rpx;
    width: 80%;
  }

  .close {
    display: flex;

    >img {
      margin-left: auto;
      width: 28rpx;
      height: 28rpx;
    }
  }

  .popup-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
  }

  // 暂无信息
  .nomessage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
}

//公共标题
.com-title {
  height: 90rpx;
  font-size: 30rpx;
  color: #333333;
  font-weight: 700;
  line-height: 90rpx;
}

//咨询问题
.consulting-question {
  width: 690rpx;
  height: 400rpx;
  margin-bottom: $r24;
  padding: 0 $r24;
  background: #ffffff;
  border-radius: 14px;
}

//添加图片
.add-image {
  box-sizing: border-box;
  min-height: 319rpx;
  padding: 0 $r24 $r24;
  margin-bottom: 80px;
  background: #ffffff;
  border-radius: 14rpx;
}

.uni-list-cell {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
</style>
